/* 1. 针对 Chrome、Edge、Safari 等 WebKit 内核浏览器 */
/* 隐藏滚动条轨道和滑块，保留滚动功能 */
.hide-scrollbar::-webkit-scrollbar {
  width: 0; /* 纵向滚动条宽度设为 0 */
  height: 0; /* 横向滚动条高度设为 0（若需隐藏横向可加） */
}

/* 2. 针对 Firefox 浏览器 */
/* 通过设置滚动条宽度为 none 隐藏 */
.hide-scrollbar {
  scrollbar-width: none; /* Firefox 专属属性，none 表示隐藏滚动条 */
  -ms-overflow-style: none; /* IE/Edge 旧版兼容（可选，现代浏览器可省略） */
}

/* 目标元素：给需要加效果的元素加这个类 */
.light-border-bottom- {
    /* 基础样式（可根据需求调整） */
    width: 300px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 18px;
    margin: 50px auto; /* 居中展示 */
    
    /* 关键：底部光线的核心配置 */
    position: relative; /* 用于定位伪元素 */
    border-bottom: 2px solid #e5e7eb; /* 基础灰色底边框（可选，增加层次感） */
}

/* 用伪元素 ::after 实现光线（避免增加额外DOM） */
.light-border-bottom::after {
    content: ""; /* 伪元素必须有content */
    position: absolute;
    left: 0; /* 光线初始位置：左侧 */
    bottom: -2px; /* 与基础边框对齐（若没有基础边框，设为0） */
    width: 0; /* 初始宽度：0（光线从无到有） */
    height: 2px; /* 光线高度（与基础边框一致） */
    background-color: #3b82f6; /* 光线颜色（蓝色，可替换） */
    
    /* 动画：名称、时长、循环、速度曲线 */
    animation: lightMove 2s infinite linear;
}

/* 定义光线运动的关键帧 */
@keyframes lightMove {
    0% {
        width: 0; /* 开始：光线在最左侧，宽度为0 */
        left: 0;
    }
    50% {
        width: 100%; /* 中间：光线铺满整个底部 */
        left: 0;
    }
    100% {
        width: 0; /* 结束：光线在最右侧，宽度为0 */
        left: 100%;
    }
}

.glow-border-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px; /* 与基础边框对齐 */
    height: 3px; /* 光线高度（比基础边框粗，突出效果） */
    
    /* 渐变光线：中心亮、两侧淡（模拟发光） */
    background: linear-gradient(90deg, 
        rgba(59, 130, 246, 0) 0%,  /* 左侧透明 */
        rgba(59, 130, 246, 1) 50%, /* 中间蓝色（光线核心） */
        rgba(59, 130, 246, 0) 100%  /* 右侧透明 */
    );
    
    /* 发光阴影（增强质感） */
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
    
    /* 动画：光线从左向右滑动 */
    animation: glowLightMove 12s infinite ease-in-out;
}

/* 渐变光线的关键帧 */
@keyframes glowLightMove {
    0% {
        width: 30%; /* 初始：光线在左侧，宽度30% */
        left: -30%; /* 初始位置：超出元素左侧（隐藏） */
    }
    50% {
        width: 30%; /* 中间：光线宽度不变，移动到元素中间 */
        left: 50%; /* 计算：元素宽度100% - 光线宽度30% = 70%（刚好右侧对齐） */
    }
    100% {
        width: 0; /* 结束：光线超出元素右侧（隐藏） */
        left: 100%;
    }
}